<template>
  <Card class="login-card">
    <div slot="title" style="text-align:center">
      <img :src="logo" class="logo-img">

    </div>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" >
      <Form-item prop="user">
        <Input type="text" v-model="formInline.username" placeholder="用户名">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="password">
        <Input type="password" v-model="formInline.password" placeholder="密码">
        <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item style="text-align:center">
        <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
        <Button @click="back('formInline')">返回</Button>
      </Form-item>
    </Form>
  </Card>
</template>

<script>

  import logo from 'assets/img/logo.png'

  export default {
      data () {
          return {
              logo:logo,
              formInline: {
                  username: '',
                  password: ''
              },
              ruleInline: {
                  username: [
                      { required: true, message: '请填写用户名', trigger: 'blur' }
                  ],
                  password: [
                      { required: true, message: '请填写密码', trigger: 'blur' },
                      { type: 'string', min: 1, message: '密码长度不能小于1位', trigger: 'blur' }
                  ]
              }
          }
      },
      methods: {
          handleSubmit(name) {
              let self=this;
              this.$refs[name].validate((valid) => {

                  if (valid) {

                      this.$http.post(this.$store.state.apiHost+"/login",this.$qs.stringify(this.formInline)).then(function(res){

                          if(res.data.meta.success===true){
                              console.log(res.data.data);
                              self.$Message.success('提交成功!');
                              localStorage.setItem("isLogin",true);
                              localStorage.setItem("loginUserName",self.formInline.username);
                              localStorage.setItem("loginUserId","123");
                              setTimeout(function(){
                                  let url=localStorage.getItem("last_url");
                                  url=url?url:"index.html";
                                  location.assign(url);
                              },1000);
                          }

                      })
                  } else {
                      this.$Message.error('表单验证失败!');
                  }

              })
          },
          back(name) {
              location.assign("index.html");
          }
      }
  }
</script>

<style>
  .login-card {
    width: 500px;
    margin: 100px auto;
  }

  .logo-img {
    width: 90px;
  }

</style>
